<template>
	<div class="bottom_set">
		<div class="tab_con">
			<div class="tab_item" :class="currentIndex == index ? 'active' : ''" @click="tabChange(item, index)"
				:style="{ width: (1 / tabList.length) * 100 + '%', maxWidth: '270px' }" v-for="(item, index) in tabList"
				:key="index">
				<div class="tab_icon">
					<cu-icon class="tab_icon" :type="item.icon" />
				</div>
				<div class="tab_text">{{ item.name}}</div>
				<div v-show="(item.name === '模板' ?  !use_random_template : true )" class="count_con" v-if="
					(item.name !== '高级设置' && item.name !== '音乐') ||
					(item.name === '音乐' && bgmMode === 'custom') ||
					(item.name === '模板' && !use_random_template)
				">
					{{ item.count }}
				</div>
			</div>
		</div>
		<div class="second_con" v-if="secondTab?.length">
			<!-- 切换为点击气泡框 -->
				<div class="second_item" v-show="!item.hidden" @click="operateModal(item)" v-for="(item, index) in secondTab" :key="index">
					<baseApopover  :config="{
						title: '',
						content: '',
						trigger: (item.name== '滤镜' || item.name == '字幕' || item.name == '脚本配置') ? '' : 'click',
						placement: 'bottomLeft'
						}">
						<!-- 触发元素 -->
						<template #target>
							<div class="second_content">
								<div class="left_icon">
									<cu-icon class="left_icon" :type="item.icon" />
								</div>
								<div class="right_content">
									<div class="title">{{ item.name }}</div>
									<a-tooltip placement="topLeft" :title="item.desc">
										<div class="desc">{{ item.desc }}</div>
									</a-tooltip>
								</div>
							</div>
						</template>
						<!-- 展示内容 -->
						<template #content>
							<popconfirmContent ref="popComponent" :params="operateParams" :visible="operateVisible" @close="closeOperate" />
						</template> 
					</baseApopover>
						</div>
					</div>
		<div class="main_con" :style="{ height: secondTab?.length ? `calc(50vh - 122px - 50px)` : 'calc(50vh - 43px - 50px)' }">
			<templateCom @updateNumber="updateNumber" v-show="tabList[currentIndex].name == '模板'" />
			<materialCom @updateNumber="updateNumber" v-if="edit_model == 1" v-show="tabList[currentIndex].name == '素材'" />
			<templateMaterial @updateNumber="updateNumber" v-if="edit_model == 3" v-show="tabList[currentIndex].name == '素材'" />
			<senceCom @updateNumber="updateNumber" v-if="edit_model == 4" v-show="tabList[currentIndex].name == '场景'" />
			<oralBroadcasting @updateNumber="updateNumber" v-show="tabList[currentIndex].name == '口播'" />
			<musicCom @updateNumber="updateNumber" v-show="tabList[currentIndex].name == '音乐'" />
			<wordCom v-if="edit_model != 3" @updateNumber="updateNumber" v-show="tabList[currentIndex].name == '文字'" />
			<templateWord v-if="edit_model == 3" @updateNumber="updateNumber" v-show="tabList[currentIndex].name == '文字'" />
			<stickersCom @updateNumber="updateNumber" v-show="tabList[currentIndex].name == '贴纸'" />
			<coverCom @updateNumber="updateNumber" v-show="tabList[currentIndex].name == '封面'" />
			<advancedSetting v-show="tabList[currentIndex].name == '高级设置'" />
		</div>

		 <formModal :params="operateParams" :visible="operateVisible" @close="closeOperate" />
		<scriptConfiguration :params="operateParams" :visible="configVisible" @close="closeConfig" />
		<addFilter :params="operateParams" :visible="filterVisible" @close="closeFilter" />
		<subtitleSettings :params="operateParams" :visible="subtitleVisible" @close="closeSubTitle" /> 
	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
		onMounted
	} from "vue";

	import {
		FolderAddOutlined,
		MinusOutlined,
		PlusOutlined,
	} from "@ant-design/icons-vue";

	// 封装气泡组件
	import baseApopover from '@/components/baseApopover/baseApopover.vue'

	// 弹框展示的内容
	import formModal from "./modules/formModal.vue";
	// 气泡框展示的内容
	import popconfirmContent from "./modules/popconfirmContent.vue";
	import scriptConfiguration from "./modules/scriptConfiguration.vue";
	import addFilter from "./modules/addFilter.vue";

	import senceCom from "./components/senceCom.vue";
	import oralBroadcasting from "./components/oralBroadcasting.vue";
	import musicCom from "./components/musicCom.vue";
	import advancedSetting from "./components/advancedSetting.vue";
	import subtitleSettings from "./modules/subtitleSettings.vue";

	import wordCom from "./components/wordCom.vue";
	import stickersCom from "./components/stickersCom.vue";
	import coverCom from "./components/coverCom.vue";
	import materialCom from "./components/materialCom.vue";
	import templateCom from "./components/templateCom.vue";
	import templateMaterial from "./components/templateMaterial.vue";
	import templateWord from "./components/templateWord.vue";
	import {
		useStore
	} from "vuex";
	export default defineComponent({
		components: {
			formModal,
			popconfirmContent,
			scriptConfiguration,
			addFilter,
			senceCom,
			oralBroadcasting,
			musicCom,
			advancedSetting,
			subtitleSettings,
			wordCom,
			stickersCom,
			coverCom,
			materialCom,
			templateCom,
			templateMaterial,
			templateWord,
			baseApopover,
			FolderAddOutlined,
			MinusOutlined,
			PlusOutlined
		},
		setup(props, context) {
			const store = useStore();
			const state = reactive({
				currentIndex: 1,
				// 气泡弹窗配置
				config:{
					title: '标题',
                    content: '内容',
                    trigger: '',
                    placement: 'bottomLeft'
				},
				tabList: [{
						icon: "icon-suijiyinyue",
						name: "模板",
						type: 'template',
						count: 0,
						list: [{
								icon: "icon-suiji",
								name: "随机模板",
								type: "random_template",
								desc: "未开启",
								parent_type: 'template'
							},
							{
								icon: "icon-yinliang01",
								name: "音量调整",
								type: 'video_volume',
								desc: "背景音乐：50",
								parent_type: 'template'
							},
							{
								icon: "icon-shaixuan",
								name: "筛选",
								type: 'select',
								desc: "全部",
								parent_type: 'template'
							},
						],
					},
					{
						icon: "icon-sucai",
						name: "素材",
						type: 'material',
						count: 3,
						list: [{
								icon: "icon-yinliang01",
								name: "音量调整",
								type: "video_volume",
								desc: "视频原声：100",
								parent_type: 'material'
							},
							// {
							// 	icon: "icon-yanse",
							// 	name: "颜色调整",
							// 	desc: "对比度：0/饱和度：0/亮度：0/色调：0/色温强度：0/色温：6000",
							// 	parent_type: 'material'
							// },
							{
								icon: "icon-lvjing",
								name: "滤镜",
								desc: "已关闭",
								parent_type: 'material'
							},
						],
					},
					{
						icon: "icon-changjing",
						name: "场景",
						type: 'sence',
						count: 1,
						list: [{
								icon: "icon-jiaobenyuyan",
								name: "脚本配置",
								desc: "自定义",
								parent_type: 'sence'
							},
							{
								icon: "icon-yinliang01",
								name: "音量调整",
								desc: "场景音频：100/视频原声：0",
								parent_type: 'sence'
							},
							// {
							// 	icon: "icon-yanse",
							// 	name: "颜色调整",
							// 	desc: "对比度：0/饱和度：0/亮度：0/色调：0/色温强度：0/色温：6000",
							// 	parent_type: 'sence'
							// },
							{
								icon: "icon-lvjing",
								name: "滤镜",
								desc: "已关闭",
								parent_type: 'sence'
							},
						],
					},
					{
						icon: "icon-koubo",
						name: "口播",
						type: 'broad',
						count: 0,
						list: [{
								icon: "icon-yinliang01",
								name: "音量调整",
								type: "audio_volume",
								desc: "全程解说：100",
								parent_type: 'broad'
							},
							{
								icon: "icon-zimu2",
								name: "字幕",
								desc: "已关闭",
								parent_type: 'broad'
							},
						],
					},
					{
						icon: "icon-yinle1",
						name: "音乐",
						type: 'music',
						count: 0,
						list: [{
								icon: "icon-yinliang01",
								name: "音量调整",
								type: "bgm_volume",
								desc: "背景音乐：50",
								parent_type: 'music'
							},
							{
								icon: "icon-suijiyinyue",
								name: "随机音乐",
								desc: "未开启",
								parent_type: 'music'
							},
						],
					},
					{
						icon: "icon-M_wenzi",
						name: "文字",
						type: 'word',
						count: 0,
					},
					{
						icon: "icon-tiezhi",
						name: "贴纸",
						type: 'sticker',
						count: 0,
					},
					{
						icon: "icon-tupian2",
						name: "封面",
						type: 'cover',
						count: 0,
					},
					{
						icon: "icon-shezhi",
						name: "高级设置",
						type: 'advanced_setting',
						count: 0,
					},
				],
				secondTab: [],

				operateVisible: false,
				configVisible: false,
				filterVisible: false,
				subtitleVisible: false,
				operateParams: {},
				
			});
			
			state.secondTab = state.tabList[0]?.list;

			let edit_model = store.getters.clipJSON.edit_model
			if (edit_model == 1) {
				state.tabList = state.tabList.filter(
					(item) => item.name != "场景" && item.name != "模板"
				);
			} else if (edit_model == 3) {
				// 不显示 场景 音乐
				state.tabList = state.tabList.filter(
					(item) => item.name != "场景" && item.name != "音乐"
				);
				let index = state.tabList.findIndex(item=>item.name == '素材')
				if(index!=-1){
					let secondIndex = state.tabList[index]?.list?.findIndex(item=>item.name == '滤镜')
					if(secondIndex != -1){
						state.tabList[index].list[secondIndex]['hidden'] = true
					}
				}
			} else if (edit_model == 4) {
				// 不显示 模板 素材
				state.tabList = state.tabList.filter(
					(item) => item.name != "模板" && item.name != "素材"
				);
			} else if (edit_model == 5) {
				//只显示 封面
				state.tabList = [];
			}
			state.currentIndex = 0;
			state.secondTab = state.tabList[0].list;

			const bgmMode = computed(() => store.getters.clipJSON?.bgm_mode);

			// 是否开启随机模板
			const use_random_template = computed(()=> store.getters.clipJSON.use_random_template)

			watch(
				[() => store.getters.clipJSON.volume.video_volume, () => store.getters.clipJSON.volume.scene_volume, ()=>store.getters.clipJSON?.script_data?.title],
				([val1, val2, val3]) => {
					let index = state.tabList
						.findIndex((item) => item.name === "场景")
					if (index == -1) return
					state.tabList[index]
						.list.find((i) => i.name === "音量调整").desc = `场景音频：${val2}/视频原声：${val1}`;
					state.tabList[index]
						.list.find((i) => i.name === "脚本配置").desc = val3;
				}, {
					immediate: true,
				}
			);

			watch(
				() => store.getters.clipJSON.volume.video_volume,
				(val) => {
					let index = state.tabList
						.findIndex((item) => item.name === "素材")
					if (index == -1) return
					state.tabList[index]
						.list.find((i) => i.name === "音量调整").desc = `视频原声：${val}`;
				}, {
					immediate: true,
				}
			);
			
			watch(
				() => store.getters.clipJSON.volume.audio_volume,
				(val) => {
					let index = state.tabList
						.findIndex((item) => item.name === "口播")
					if (index == -1) return
					state.tabList[index]
						.list.find((i) => i.name === "音量调整").desc = `全程解说：${val}`;
				}, {
					immediate: true,
				}
			);
			
			watch(
				() => store.getters.clipJSON.volume.bgm_volume,
				(val) => {
					let index = state.tabList
						.findIndex((item) => item.name === "音乐" || item.name === "模板")
					if (index == -1) return
					state.tabList[index]
						.list.find((i) => i.name === "音量调整").desc = `背景音乐：${val}`;
				}, {
					immediate: true,
				}
			);
			
			watch(
				() => store.getters.clipJSON.use_random_template,
				(val) => {
					let index = state.tabList
						.findIndex((item) => item.name === "模板")
					if (index == -1) return
					state.tabList[index]
						.list.find((i) => i.name === "随机模板").desc = val?'已开启':'未开启';
					if(index != -1){
						let secondIndex = state.tabList[index]?.list?.findIndex(item=>item.name == '筛选')
						if(secondIndex != -1){
							if(val){ 
								state.tabList[index].list[secondIndex]['hidden'] = true
							} else {
								state.tabList[index].list[secondIndex]['hidden'] = false
							}
						}
					}
				}, {
					immediate: true,
				}
			);
			
			watch(
				() => store.getters.selectTemplate,
				(val) => {
					let index = state.tabList
						.findIndex((item) => item.name === "模板")
					if (index == -1) return
					state.tabList[index]
						.list.find((i) => i.name === "筛选").desc = `时长:${val.duration},标签:${val.label}`;
					
				}, {
					immediate: true,
					deep: true
				}
			);
			
			// watch(
			// 	() => store.getters.clipJSON.effect_filter.color,
			// 	(color) => {
			// 		let index = state.tabList
			// 			.findIndex((item) => item.name === "素材")
			// 		if (index == -1) return
			// 		state.tabList[index]
			// 			.list.find(
			// 				(i) => i.name === "颜色调整"
			// 			).desc =
			// 			`对比度：${color.contrast}/饱和度：${color.saturation}/亮度：${color.brightness}/色调：${color.tint}/色温强度：${color.temperature_ratio}/色温：${color.kelvin_temperature}`;
			// 	}, {
			// 		immediate: true,
			// 		deep: true,
			// 	}
			// );

			watch(
				() =>
				store.getters.clipJSON.effects?.find((item) => item.type === "filter"),
				(val) => {
					let index = state.tabList
						.findIndex((item) => item.name === "素材" || item.name === "场景")
					if (index == -1) return
					if (val) {
						state.tabList[index]
							.list.find((i) => i.name === "滤镜").desc = `已开启，${
								val?.params?.random
								  ? "随机滤镜"
								  : val?.params?.sub_types?.map((i) => i.material_name)
							}`;
					} else {
						if(store.getters.clipJSON.edit_model != 3){
							state.tabList[index]
								.list.find((i) => i.name === "滤镜").desc = "已关闭";
						}
					}
				}, {
					immediate: true,
					deep: true,
				}
			);

			watch(
				() => store.getters.clipJSON.subtitle_config?.open,
				(val) => {
					let index = state.tabList
						.findIndex((item) => item.name === "口播")
					if (index == -1) return
					if (val) {
						state.tabList[index].list[1].desc =
							"已开启";
					} else {
						state.tabList[index].list[1].desc =
							"已关闭";
					}
				}, {
					immediate: true,
					deep: true
				}
			);

			watch(
				() => store.getters.clipJSON.bgm_mode,
				(val) => {
					let index = state.tabList
						.findIndex((item) => item.name === "音乐")
					if (index == -1) return
					if (val === "custom") {
						state.tabList.find((item) => item.name === "音乐").list[1].desc =
							"未开启";
					} else {
						state.tabList.find((item) => item.name === "音乐").list[1].desc =
							"已开启";
					}
				}, {
					immediate: true,
				}
			);

			const tabChange = (item, index) => {
				if (state.currentIndex == index) return;
				state.currentIndex = index;
				if (item.list && item.list.length != 0) {
					state.secondTab = item.list;
				} else {
					state.secondTab = [];
				}
			};

			const operateModal = (item) => {
				if (item.name == "脚本配置") {
					state.configVisible = true;
				} else if (item.name == "滤镜") {
					state.filterVisible = true;
				} else if (item.name == "字幕") {
					state.subtitleVisible = true;
				}
				// 开启声音控制面板
				//  else {
				// 	state.operateVisible = true;
				// }
				state.operateParams = item;
			};

			const closeOperate = () => {
				state.operateVisible = false;
				state.operateParams = {};
			};

			const closeConfig = () => {
				state.configVisible = false;
				state.operateParams = {};
			};

			const closeFilter = () => {
				state.filterVisible = false;
				state.operateParams = {};
			};

			const closeSubTitle = () => {
				state.subtitleVisible = false;
				state.operateParams = {};
			};

			const updateNumber = (obj) => {
				let index = state.tabList.findIndex((item) => item.type == obj.type)
				if (index == -1) return
				state.tabList[index].count = obj.count;
			};

			

			return {
				tabChange,
				operateModal,
				closeOperate,
				closeConfig,
				closeFilter,
				closeSubTitle,
				updateNumber,
				bgmMode,
				edit_model,
				use_random_template,
				...toRefs(state),
			};
		},
	});
</script>

<style lang="less" scoped>
	.bottom_set {
		width: 100%;
		height: 100%;
		background-color: #1e1e20;
		.tab_con {
			display: flex;
			.tab_item {
				padding: 6px 0;
				cursor: pointer;
				border-right: 2px solid #000;
				background-color: #121213;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				transition: all 0.3s;
				&.active {
					background-color: #1e1e20;

					.tab_icon {
						color: #2878FF;
					}

					.icon {
						color: #2878FF;
					}

					.count_con {
						background: #4f4f51;
						border: 1px solid #8a8a8c;
					}
				}

				.tab_icon {
					font-size: 20px;
				}

				.tab_text {
					font-size: 14px;
					margin-left: 7px;
				}

				.count_con {
					margin-left: 10px;
					min-width: 18px;
					height: 18px;
					line-height: 18px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50px;
					background-color: #333336;
					font-size: 12px;
					color: #fff;
					padding: 5px;
				}
			}
		}

		.second_con {
				display: flex;
			border-bottom: 0.5px solid #333;
			padding: 15px;
			.second_content{
				display: flex;
			}
			// span{

			// }

			.second_item {
				display: flex;
				align-items: center;
				margin-left: 20px;
				padding: 2px 10px;
				transition: all 0.3s;

				&:hover {
					border-radius: 6px;
					background-color: rgba(255, 255, 255, 0.12);
					cursor: pointer;
				}

				.left_icon {
					font-size: 28px;
					color: rgba(255, 255, 255, 0.82);
				}

				.right_content {
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.title {
						color: #9b9b9c;
						font-size: 13px;
					}

					.desc {
						font-size: 13px;
						color: #6b6b71;
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 130px;
					}
				}
			}
		}

		.main_con {
			width: 100%;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}
		}
	}


	.form_con {
		.form_item {
			display: flex;
			align-items: center;
			margin-top: 10px;

			.form_title {
				width: 70px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
</style>